<template>
  <div class="init_main">
    <p class="name_sty">{{ name }}</p>
    <div class="table">
      <el-row>
        <el-col :span="12">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            height="800"
            highlight-current-row
            @current-change="row_click"
          >
            <el-table-column prop="Name" label="名称"> </el-table-column>
            <el-table-column prop="Count" label="人数"> </el-table-column>
            <el-table-column prop="Percent" label="占比">
              <template slot-scope="scope">
                <span>{{ scope.row.Percent }}%</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <el-table
            :data="tableData2"
            border
            style="width: 100%"
            height="800"
            highlight-current-row
          >
            <el-table-column
              prop="user_id"
              label="工号"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="user_no"
              label="登录名"
              align="center"
            ></el-table-column>
            <el-table-column prop="user_name" label="姓名" align="center">
              <template slot-scope="scope">
                <span style="color: blue" @click="goto_da(scope.row)">{{
                  scope.row.user_name
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="sex"
              label="性别"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="职称"
              align="center"
            ></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      tableData: [],
      section: "",
      tableData2: [],
    };
  },
  mounted() {
    this.name = this.$route.meta.title;
    this.getList();
  },
  methods: {
    getList() {
      this.$get("/BsTj/Section1").then((res) => {
        this.tableData = res.Data;
        this.section = res.Data[0].Id;
        this.getList2();
      });
    },
    getList2() {
      this.$get("/BsTj/Section2?section=" + this.section).then((res) => {
        this.tableData2 = res.Data;
        console.log(res.Data);
      });
    },
    row_click(row) {
      console.log(row);
      this.section = row.Id;
      this.getList2();
    },
    goto_da(val) {
      console.log(val);
      this.$router.push(
        "/RYDA/daxx?人员ID=" +
          val.user_id +
          "&人员姓名=" +
          val.user_name +
          "&按钮权限=true"
      );
    },
  },
};
</script>

<style scoped lang='scss'>
.init_main {
  background-color: #fff;
  height: calc(100vh - 60px);
  border: 1px solid #333;
  border-radius: 5px;
  margin: 5px;
  padding: 10px;
  font-family: "FangSong";
  color: #000;
  .name_sty {
    color: #000;
    font-weight: 700;
    font-size: 18px;
    font-family: "FangSong";
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
  }
  .table {
    margin-top: 15px;
  }
  .page {
    text-align: right;
  }
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: rgb(208, 229, 250);
  color: rgb(65, 158, 255);
  font-weight: 700;
}
.tac {
  text-align: center;
}
</style>